<template>
    <div>
        <div class="outer">
            <el-page-header @back="goBack" content="学生成绩输入">
            </el-page-header>
            <!-- ------------------------------->
            <el-tabs v-model="activeName" @tab-click="handleClick" :router="true">
                <el-tab-pane label="成绩输入" name="first">
                    <label>
                        <p>学号</p>
                        <el-input placeholder="请输入学号" v-model="stu_id" clearable></el-input>
                    </label>
                    <label>
                        <p>姓名</p>
                        <el-input placeholder="请输入姓名" v-model="stu_name" clearable></el-input>
                    </label>
                    <div class="box1">
                        <div class="enter">
                            <h1>入学考试成绩</h1>
                            <label>
                                <p>语文</p>
                                <el-input placeholder="请输入语文成绩" v-model.number="entry_exam_chinese" clearable>
                                </el-input>
                            </label>
                            <label>
                                <p>数学 </p>
                                <el-input placeholder="请输入数学成绩 " v-model.number="entry_exam_math" clearable></el-input>
                            </label>
                            <label>
                                <p>英语</p>
                                <el-input placeholder="请输入英语成绩" v-model.number="entry_exam_english" clearable>
                                </el-input>
                            </label>
                            <label>
                                <p>理综 </p>
                                <el-input placeholder="请输入理综成绩" v-model.number="entry_exam_lizong" clearable></el-input>
                            </label>
                            <label>
                                <p>文综</p>
                                <el-input placeholder="请输入文综成绩" v-model.number="entry_exam_wenzong" clearable>
                                </el-input>
                            </label>
                        </div>
                        <div class="mid">
                            <h1>期中考试成绩</h1>
                            <label>
                                <p>语文</p>
                                <el-input placeholder="请输入语文成绩" v-model.number="mid_exam_chinese" clearable></el-input>
                            </label>
                            <label>
                                <p>数学 </p>
                                <el-input placeholder="请输入数学成绩 " v-model.number="mid_exam_math" clearable></el-input>
                            </label>
                            <label>
                                <p>英语</p>
                                <el-input placeholder="请输入英语成绩" v-model.number="mid_exam_english" clearable></el-input>
                            </label>
                            <label>
                                <p>理综 </p>
                                <el-input placeholder="请输入理综成绩" v-model.number="mid_exam_lizong" clearable></el-input>
                            </label>
                            <label>
                                <p>文综</p>
                                <el-input placeholder="请输入文综成绩" v-model.number="mid_exam_wenzong" clearable></el-input>
                            </label>
                        </div>
                        <div class="end">
                            <h1>期末考试成绩</h1>
                            <label>
                                <p>语文</p>
                                <el-input placeholder="请输入语文成绩" v-model.number="end_exam_chinese" clearable></el-input>
                            </label>
                            <label>
                                <p>数学 </p>
                                <el-input placeholder="请输入数学成绩 " v-model.number="end_exam_math" clearable></el-input>
                            </label>
                            <label>
                                <p>英语</p>
                                <el-input placeholder="请输入英语成绩" v-model.number="end_exam_english" clearable></el-input>
                            </label>
                            <label>
                                <p>理综 </p>
                                <el-input placeholder="请输入理综成绩" v-model.number="end_exam_lizong" clearable></el-input>
                            </label>
                            <label>
                                <p>文综</p>
                                <el-input placeholder="请输入文综成绩" v-model.number="end_exam_wenzong" clearable></el-input>
                            </label>
                        </div>
                    </div>
                    <div class="sub">
                        <el-button type="primary" plain @click="suber3(1, 1, 1)">提交成绩</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="入学成绩输入" name="second">
                    <h1>入学考试成绩</h1>
                    <label>
                        <p>学号</p>
                        <el-input placeholder="请输入学号" v-model="stu_id" clearable></el-input>
                    </label>
                    <label>
                        <p>姓名 </p>
                        <el-input placeholder="请输入姓名" v-model="stu_name" clearable></el-input>
                    </label>
                    <label>
                        <p>语文</p>
                        <el-input placeholder="请输入语文成绩" v-model.number="entry_exam_chinese" clearable>
                        </el-input>
                    </label>
                    <label>
                        <p>数学 </p>
                        <el-input placeholder="请输入数学成绩 " v-model.number="entry_exam_math" clearable></el-input>
                    </label>
                    <label>
                        <p>英语</p>
                        <el-input placeholder="请输入英语成绩" v-model.number="entry_exam_english" clearable>
                        </el-input>
                    </label>
                    <label>
                        <p>理综 </p>
                        <el-input placeholder="请输入理综成绩" v-model.number="entry_exam_lizong" clearable></el-input>
                    </label>
                    <label>
                        <p>文综</p>
                        <el-input placeholder="请输入文综成绩" v-model.number="entry_exam_wenzong" clearable>
                        </el-input>
                    </label>
                    <div class="sub">
                        <el-button type="primary" plain @click="suber3(1, 0, 0)">提交成绩</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="期中成绩输入" name="third">
                    <h1>期中考试成绩</h1>
                    <label>
                        <p>学号</p>
                        <el-input placeholder="请输入学号" v-model="stu_id" clearable></el-input>
                    </label>
                    <label>
                        <p>姓名 </p>
                        <el-input placeholder="请输入姓名" v-model="stu_name" clearable></el-input>
                    </label>
                    <label>
                        <p>语文</p>
                        <el-input placeholder="请输入语文成绩" v-model.number="mid_exam_chinese" clearable></el-input>
                    </label>
                    <label>
                        <p>数学 </p>
                        <el-input placeholder="请输入数学成绩 " v-model.number="mid_exam_math" clearable></el-input>
                    </label>
                    <label>
                        <p>英语</p>
                        <el-input placeholder="请输入英语成绩" v-model.number="mid_exam_english" clearable></el-input>
                    </label>
                    <label>
                        <p>理综 </p>
                        <el-input placeholder="请输入理综成绩" v-model.number="mid_exam_lizong" clearable></el-input>
                    </label>
                    <label>
                        <p>文综</p>
                        <el-input placeholder="请输入文综成绩" v-model.number="mid_exam_wenzong" clearable></el-input>
                    </label>
                    <div class="sub">
                        <el-button type="primary" plain @click="suber3(0, 1, 0)">提交成绩</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="期末成绩输入" name="fourth">
                    <h1>期末考试成绩</h1>
                    <label>
                        <p>学号</p>
                        <el-input placeholder="请输入学号" v-model="stu_id" clearable></el-input>
                    </label>
                    <label>
                        <p>姓名 </p>
                        <el-input placeholder="请输入姓名" v-model="stu_name" clearable></el-input>
                    </label>
                    <label>
                        <p>语文</p>
                        <el-input placeholder="请输入语文成绩" v-model.number="end_exam_chinese" clearable></el-input>
                    </label>
                    <label>
                        <p>数学 </p>
                        <el-input placeholder="请输入数学成绩 " v-model.number="end_exam_math" clearable></el-input>
                    </label>
                    <label>
                        <p>英语</p>
                        <el-input placeholder="请输入英语成绩" v-model.number="end_exam_english" clearable></el-input>
                    </label>
                    <label>
                        <p>理综 </p>
                        <el-input placeholder="请输入理综成绩" v-model.number="end_exam_lizong" clearable></el-input>
                    </label>
                    <label>
                        <p>文综</p>
                        <el-input placeholder="请输入文综成绩" v-model.number="end_exam_wenzong" clearable></el-input>
                    </label>
                    <div class="sub">
                        <el-button type="primary" plain @click="suber3(0, 0, 1)">提交成绩</el-button>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>

import {
    Tabs,
    TabPane,
    PageHeader,
    Input,
    Button
} from 'element-ui'
import request from "../../api/request.js"
export default {
    data() {
        return {
            activeName: 'first',
            input: '',
            stu_id: "",
            stu_name: "",
            entry_exam_chinese: "",
            entry_exam_math: "",
            entry_exam_english: "",
            entry_exam_lizong: "",
            entry_exam_wenzong: "",
            mid_exam_chinese: "",
            mid_exam_math: "",
            mid_exam_english: "",
            mid_exam_lizong: "",
            mid_exam_wenzong: "",
            end_exam_chinese: "",
            end_exam_math: "",
            end_exam_english: "",
            end_exam_lizong: "",
            end_exam_wenzong: "",
        }
    },
    components: {
        "el-tabs": Tabs,
        "el-tab-pane": TabPane,
        "el-page-header": PageHeader,
        "el-input": Input,
        "el-button": Button
    },
    methods: {
        goBack() {
            // console.log('go back');
            this.$router.back()
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        async suber3(enter, mid, end) {
            const stu_entry_score = {
                stu_id: this.stu_id,
                stu_name: this.stu_name,
                chinese: parseInt(this.entry_exam_chinese),
                math: parseInt(this.entry_exam_math),
                english: parseInt(this.entry_exam_english),
                lizong: parseInt(this.entry_exam_lizong),
                wenzong: parseInt(this.entry_exam_wenzong),
            }
            const stu_mid_score = {
                stu_id: this.stu_id,
                stu_name: this.stu_name,
                chinese: parseInt(this.mid_exam_chinese),
                math: parseInt(this.mid_exam_math),
                english: parseInt(this.mid_exam_english),
                lizong: parseInt(this.mid_exam_lizong),
                wenzong: parseInt(this.mid_exam_wenzong),
            }
            const stu_end_score = {
                stu_id: this.stu_id,
                stu_name: this.stu_name,
                chinese: parseInt(this.end_exam_chinese),
                math: parseInt(this.end_exam_math),
                english: parseInt(this.end_exam_english),
                lizong: parseInt(this.end_exam_lizong),
                wenzong: parseInt(this.end_exam_wenzong),
            }
            console.log(stu_entry_score, stu_mid_score, stu_end_score)
            if (enter) {
                await request("post", "/entry_exam", stu_entry_score, "form")
            }
            if (mid) {
                await request("post", "/mid_exam", stu_mid_score, "form")
            }
            if (end) {
                await request("post", "/end_exam", stu_end_score, "form")
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.outer {
    box-sizing: border-box;
    padding: 20px;
    font-size: 20px;
    height: 100%;

    p {
        width: 80px;
        text-align: center;
    }

    label {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 30px 0;
    }

    h1 {
        font-size: 30px;
        text-align: center;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .title {
        font-size: larger;
    }

    .box1 {
        width: 100%;
        height: 100%;
        // background-color: aquamarine;
        display: flex;

        .enter {
            flex: 1;
            box-sizing: border-box;
            padding: 20px;
        }

        .mid {
            flex: 1;
            box-sizing: border-box;
            padding: 20px;
        }

        .end {
            flex: 1;
            box-sizing: border-box;
            padding: 20px;
        }
    }

    .sub {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .el-page-header /deep/ .el-page-header__title {
        font-size: 18px;
    }
}
</style>